<!--
 * @Description:救援单查询
 * @Autor: 刘诗文
 * @Date: 2020-11-11 17:08:32
 * @LastEditors: 刘诗文
 * @LastEditTime: 2021-01-07 17:32:18
-->
<template>
  <div>
    <TopFilter :list="topFilterList" :cols="4" :labelWidth="105" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <FilterTable
      ref="table"
      height="500"
      selectionType="single"
      :columns="columns"
      :fetchapi="fetchapi"
      :params="fetchParams"
      :datakey="'rows'"
      columnsRef="rescueOrderQuerylsw"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="onRowSelectChange"
      :isExportExcel="true"
      exportFileName="救援单查询.xlsx"
    >
      <!-- <template slot="controls">
        <el-button size="small" type="primary" icon="el-icon-download">导出</el-button>
      </template> -->
    </FilterTable>
    <Drawer :visible.sync="actions.visible" :title="actions.title" width="90%" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <rescueOrderQueryPanel :formData="this.resData" @close="closeHandler" />
    </Drawer>
    <BaseDialog
      :visible.sync="actionsDealer.visible"
      :title="actionsDealer.title"
      width="300"
      destroyOnClose
      :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }"
    >
      <searchDearlerList :resData="this.resData" @dealerData="dealerData" @close="closeSetting" />
    </BaseDialog>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import { getRescueList } from '@/api/customerRepair/rescueManagement/rescueOrder';
import rescueOrderQueryPanel from './rescueOrderQueryPanel';
import searchDearlerList from '@/pages/customerRepair/vehicleOwnerManagement/vehicleChangeQuery/searchDearlerList';
import { getDearlerListByTranslate } from '@/api/customerRepair/vehicleOwnerManagement/vehicleChange';
import { getProvince, getCitys, getDistrict, getRegion } from '@/api/customerRepair/customerInfo/ownerVehicleManagement';
import thirdtableVue from '../../../repair/business/customer/Repairhistory/Detailed/thirdtable.vue';
import { isFormEmpty, notifyAction, findTableItem } from '@/utils';

export default {
  name: 'rescueOrderQuery',
  components: {
    rescueOrderQueryPanel,
    searchDearlerList
  },
  mixins: [dictionary],
  data() {
    this.BaseTable = null;
    this.selectedRow = null;
    this.resData = {};
    return {
      topFilterList: this.createTopFilterList(),
      columns: this.createTableColumns(),
      fetchapi: getRescueList,
      fetchParams: { type: 'OEM' },
      actions: { visible: false, title: '' },
      actionsDealer: { visible: false, title: '' },
      dealerList: [],
      regionList: []
    };
  },
  mounted() {
    this.BaseTable = this.$refs.table;
    this.getDearlerListByTranslate();
    this.getRegion();
    this.getProvine();
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '工单编号',
          fieldName: 'rescueNo',
          initialValue: ''
        },
        {
          type: 'SELECT',
          label: '客户类型',
          fieldName: 'ownerProperty',
          initialValue: '',
          itemList: this.createDictList(8011, [80111003, 80111004, 80111005, 80111006, 80111007, 80111008, 80111009, 80111010])
        },
        {
          type: 'INPUT',
          label: '客户姓名',
          fieldName: 'ownerName',
          initialValue: ''
        },
        {
          type: 'SELECT',
          label: '救援方式',
          fieldName: 'rescueModeThree',
          initialValue: '',
          itemList: this.createDictList(1222)
        },
        {
          type: 'SELECT',
          label: '紧急程度',
          fieldName: 'rescueLevel',
          initialValue: '',
          itemList: this.createDictList(1230)
        },
        {
          type: 'SELECT',
          label: '跟进事项',
          fieldName: 'rescueStatus',
          initialValue: '',
          itemList: this.createDictList(1240)
        },
        {
          type: 'SELECT',
          label: '派工方式',
          fieldName: 'dataSources',
          itemList: this.createDictList(1045, [10451003])
        },
        {
          type: 'INPUT',
          label: '经销商',
          fieldName: 'ownerCode',
          initialValue: '',
          readonly: true,
          unitRender: () => {
            return <el-button slot="append" icon="el-icon-search" onClick={this.openDRL}></el-button>;
          }
        },
        {
          type: 'SELECT',
          label: '所在省份',
          fieldName: 'rescueProvince',
          itemList: [],
          change: val => {
            this.provinceChange(val);
            let itemList = this.topFilterList.find(item => item.fieldName === 'rescueProvince').itemList;
          }
        },
        {
          type: 'SELECT',
          label: '城市',
          fieldName: 'rescueCity',
          itemList: []
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 70,
          render: props => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.detail(props.row)}>
                  明细
                </el-button>
              </div>
            );
          }
        },
        {
          title: '救援经销商',
          dataIndex: 'OWNER_CODE',
          width: 120,
          dictItems: [],
          showOverFlowTooltip: true
          // render: props => {
          //   return <span>{this.getText('dealer', props.row.OWNER_CODE)}</span>;
          // }
        },
        {
          title: '工单编号',
          dataIndex: 'rescueNo',
          width: 120,
          showOverFlowTooltip: true
        },
        {
          title: '客户类型',
          dataIndex: 'ownerProperty',
          width: 120,
          showOverFlowToolTip: true,
          dictItems: this.createDictList(8011)
        },
        {
          title: '车主编号',
          dataIndex: 'ownerNo',
          width: 120,
          showOverFlowTooltip: true
        },
        {
          title: '车主姓名',
          dataIndex: 'ownerName',
          width: 120,
          showOverFlowTooltip: true
        },
        {
          title: '手机',
          dataIndex: 'ownerMobile',
          width: 120,
          showOverFlowTooltip: true
        },
        // {
        //   title: '地址',
        //   dataIndex: 'address',
        //   width: 120,
        //   showOverFlowTooltip: true
        // },
        {
          title: '省',
          dataIndex: 'rescueProvince',
          width: 120,
          dictItems: [],
          showOverFlowToolTip: true
        },
        {
          title: '市',
          dataIndex: 'rescueCity',
          width: 120,
          dictItems: [],
          showOverFlowToolTip: true
        },
        {
          title: '车型',
          dataIndex: 'modelName',
          width: 120,
          showOverFlowTooltip: true
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          width: 120,
          showOverFlowTooltip: true
        },
        {
          title: '服务类型',
          dataIndex: 'rescueModeThree',
          width: 120,
          dictItems: this.createDictList(1222),
          showOverFlowToolTip: true
        },
        {
          title: '紧急程度',
          dataIndex: 'rescueLevel',
          width: 120,
          dictItems: this.createDictList(1230),
          showOverFlowToolTip: true
        },
        {
          title: '派单方式',
          dataIndex: 'dataSources',
          width: 120,
          dictItems: this.createDictList(1045),
          showOverFlowToolTip: true
        },
        {
          title: '处理方式',
          dataIndex: 'a12',
          width: 120,
          showOverFlowTooltip: true
        },
        {
          title: '状态',
          dataIndex: 'rescueStatus',
          width: 120,
          dictItems: this.createDictList(1240),
          showOverFlowTooltip: true
        },
        {
          title: '预约时间',
          dataIndex: 'appointmentDate',
          width: 120,
          showOverFlowToolTip: true
        }
        // {
        //   title: '是否回访',
        //   dataIndex: 'a15',
        //   width: 120,
        //   showOverFlowToolTip: true,
        //   render: props => {
        //     return <span>{this.createDictText(props.row.a15, 1004)}</span>;
        //   }
        // },
        // {
        //   title: '是否激活',
        //   dataIndex: 'a16',
        //   width: 120,
        //   showOverFlowToolTip: true,
        //   render: props => {
        //     return <span>{this.createDictText(props.row.a16, 1004)}</span>;
        //   }
        // }
      ];
    },
    changeHandle(val) {
      val.type = 'OEM';
      this.fetchParams = Object.assign({}, val);
    },
    collapseHandle() {
      this.$nextTick(this.BaseTable.EXECUTE_RESET_HEIGHT);
    },
    onRowSelectChange(rows) {
      if (!rows.length) {
        this.selectedRow = null;
      } else {
        this.selectedRow = rows[0];
      }
    },
    //打开经销商页面
    openDRL() {
      this.actionsDealer = { visible: true, title: '选择经销商' };
    },
    // 获取经销商数据
    dealerData(val) {
      this.topFilterList.find(x => x.fieldName === 'ownerCode').initialValue = val.dealerCode;
      this.closeSetting();
    },
    // 关闭经销商页面
    closeSetting() {
      this.actionsDealer.visible = false;
    },
    // 打开明细页面
    detail(row) {
      this.resData = row;
      row.dealerName = this.dealerList.find(x => x.value === row.OWNER_CODE) ? this.dealerList.find(x => x.value === row.OWNER_CODE).text : '';
      console.log(row);
      this.actions = { visible: true, title: '救援单明细' };
    },
    //关闭明细页面
    closeHandler() {
      this.actions.visible = val;
      this.fetchParams = { ...this.fetchParams };
    },
    // 查询全部经销商列表
    async getDearlerListByTranslate() {
      const res = await getDearlerListByTranslate();
      if (res.resultCode === 200) {
        if (res.errMsg) {
          notifyAction(res.errMsg, 'error');
        } else {
          this.dealerList = findTableItem(this.columns, 'OWNER_CODE').dictItems = res.data.map(item => ({ text: item.dealerName, value: item.dealerCode + '' }));
        }
      }
    },
    // 清空下拉框表当控件的值和下拉列表
    clearFormItem(item) {
      item.initialValue = undefined;
      item.itemList = [];
    },
    // 获取省市
    async getRegion() {
      const allRegion = await getRegion();
      let regionList = allRegion.data.map(x => ({ value: x.regionId + '', text: x.regionName }));
      let targetTableItems = [findTableItem(this.columns, 'rescueProvince'), findTableItem(this.columns, 'rescueCity')];
      targetTableItems.forEach(item => {
        item.dictItems = regionList;
      });
    },
    // 获取省
    async getProvine() {
      const res = await getProvince();
      this.topFilterList.find(item => item.fieldName === 'rescueProvince').itemList = res.data.map(x => ({ value: x.regionId, text: x.regionName }));
    },
    // 获取市
    async provinceChange(regionId) {
      this.clearFormItem(this.topFilterList.find(item => item.fieldName === 'rescueCity'));
      if (!regionId) return;
      const res = await getCitys(regionId);
      this.topFilterList.find(item => item.fieldName === 'rescueCity').itemList = res.data.map(x => ({ value: x.regionId, text: x.regionName }));
    }
  }
};
</script>
<style lang="less" scoped></style>
